<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <title>年终总结</title>
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/base.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/summary/animate.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/swiper-3.3.1.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/yearend.css?v={$staticVersion}" />

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/js.js"></script>
    <script src="/static/js/mod.js"></script>
    <script src="/static/summary/swiper-3.4.1.min.js"></script>
    <script src="/static/summary/swiper.animate1.0.2.min.js"></script>
</head>
<body>
    <div class="swiper-container">
       <section id="year-box" class="swiper-wrapper">
       </section>
    </div>
    
    <script id="year" type="text/html">
        <section class="swiper-slide  bg open ac">
            <div class="twinkle">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
            <div class="pagedown">
                <img src="/static/images/share/logo-blue.png">
                <a class="arrow-down swiper-button-next"></a>
            </div>
            <div class="meteor"></div>
            <div class="con">
                <img class="head-img ma" src="<%=result.list.header%>">
                <p class="user-name"><%=result.list.nickname%></p>
                <img class="end-img" src="/static/images/summary/nzzj.png">
                <img class="img2016" src="/static/images/summary/2016.png">
                <a class="open-btn swiper-button-next">开启</a>
            </div>
            
        </section>
        <!-- 第一屏  开启 -->
        <section class="swiper-slide bigdata ac bg-blue">
            <div class="pagedown ani"  swiper-animate-effect="slideInUp" swiper-animate-duration="0.2s" swiper-animate-delay="2.3s">
                <img src="/static/images/share/logo-blue.png">
                <a class="arrow-down swiper-button-next"></a>
            </div>
            <div class="con">
                <div class="dwb">
                    <img class="head-img mr10" src="<%=result.list.header%>">
                    <p class="user-name"><%=result.list.nickname%></p>
                </div>
                <img class="data-img ani" swiper-animate-effect="slideInUp" swiper-animate-duration="0.2s" swiper-animate-delay="0s" src="/static/images/summary/dsj.png">
                
                <ul class="data-list ani" swiper-animate-effect="slideInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
                    <li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="0.4s">
                        使用虎扑跑步<b><%=result.list.useCnt%></b>天
                    </li>
                    <li class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.7s" swiper-animate-delay="0.7s">
                        总里程<b><%=result.list.mileage%></b>公里<br/>
                        最远记录<b><%=result.list.maxMileage%></b>公里<br/>
                        最快配速<b><%=result.list.maxSpeed%></b>
                    </li>
                    <li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="1s">
                       等级成就 <b><%=result.list.level%></b>
                    </li>
                    <li class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.7s" swiper-animate-delay="1.3s">
                        经常跑步的时间 <b><%=result.list.runTimeMsg%></b><br/>
                        足迹遍布<b><%=result.list.cityCnt%></b>个城市 <br/>
                        最常跑步地点 <b><%=result.list.city%></b>
                    </li>
                    <li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="1.6s">
                        获得<b><%=result.list.medalCnt%></b>个勋章成就<br/>
                        获得<b><%=result.list.certificateCnt %></b>张跑步证书
                    </li>
                </ul>
                <p class="f13 ani"  swiper-animate-effect="zoomInRight" swiper-animate-duration="0.3s" swiper-animate-delay="1.8s">继续查看详细报告</p>
               
            </div>
        </section>
        <!-- 第二屏 大数据 -->
        <section class="swiper-slide report ac bg-quan">
            <div class="pagedown">
                <img src="/static/images/share/logo-blue.png">
                <a class="arrow-down swiper-button-next"></a>
            </div>
            <div class="con">
                <div class="dwb">
                    <img class="head-img mr10" src="<%=result.list.header%>">
                    <p class="user-name"><%=result.list.nickname%></p>
                </div>
                <img class="w35 ani"  swiper-animate-effect="slideInUp" swiper-animate-duration="0.2s" swiper-animate-delay="0s" src="/static/images/summary/reporpt.png?v=3">
                <p class="f14 ani  swiper-animate-effect="slideInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0s"">使用虎扑跑步 <%=result.list.useCnt%> 天</p>
                <ul class="ani"  swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
                    <li>
                        总里程<b><%=result.list.mileage%></b>公里，<br/>
                        相当于跑了<b><%=result.list.marathonCnt%></b>个全马
                        <img src="/static/images/summary/mz.png">
                    </li>
                    <li>
                        跑步<b><%=result.list.runCnt%></b>次，平均每周跑
                        <b><%=result.list.runAvgWeekCnt%></b>次
                        <img src="/static/images/summary/rl.png">

                    </li>
                    <li >
                        跑步<b><%=result.list.elapsedtime%></b>分钟，<br/>
                        相当于每天少刷朋友圈<b><%=result.list.wechatTime%></b>分钟
                        <img src="/static/images/summary/phone.png">

                    </li>
                    <li>
                        消耗卡路里<b><%=result.list.calorie%></b>kcal，<br/>
                        可燃烧<b><%=result.list.fatCnt%></b>公斤脂肪
                        <img src="/static/images/summary/chicken.png">

                    </li>
                </ul>
                <p class="tips f12">
                    千里之行始于足下，<br/>
                    请坚信，你跑过的每一步都不会被辜负
                </p>
            </div>
        </section>
        <!-- 第san屏 跑步报告 -->
        <section class="swiper-slide report ac bg-quan">
            <div class="pagedown" >
                <img src="/static/images/share/logo-blue.png">
                <a class="arrow-down swiper-button-next"></a>
            </div>
            <div class="con">
                <div class="dwb">
                    <img class="head-img mr10" src="<%=result.list.header%>">
                    <p class="user-name"><%=result.list.nickname%></p>
                </div>
                <img class="w35"  src="/static/images/summary/report.png?v=3">
                <p class="f14" >使用虎扑跑步 <%=result.list.useCnt%> 天</p>
                <ul class="ani"  swiper-animate-effect="wobble" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
                    <li>
                        发布跑友秀
                         <img src="/static/images/summary/camera.png">
                        <b><%=result.list.postsCnt%></b>次，评论
                        <b><%=result.list.commentCnt%></b>次，<br/>
                        为他人点赞<b><%=result.list.lights%></b>个
                        <img src="/static/images/summary/zan.png"><br/>
                        收获了他人的赞<b><%=result.list.byLights %></b>个
                        <img src="/static/images/summary/szan.png">
                    </li>
                    <li>
                        加入了<b><%=result.list.groupCnt %></b>个群组 
                        <img src="/static/images/summary/qz.png">
                        结交了<b><%=result.list.runFriendsCnt%></b>个好友<br/>
                        最活跃的群组是<b>“<%=result.list.mostUserGroup%>”</b>
                    </li>
                    <li>
                        参与了<b><%=result.list.activityCnt%></b>次群组活动
                        <img src="/static/images/summary/fz.png"><br/>
                        获得<b><%=result.list.certificateCnt %></b>张荣誉证书
                        <img src="/static/images/summary/zs.png">
                    </li>
                </ul>
                <p class="tips f12" >
                    一个人也许跑得很快，<br/>
                    但一群人却能跑得更远，去跑去high吧！
                </p>
            </div>
        </section>
        <!-- 第si屏 社交报告 -->
        <section class="swiper-slide target ac bg" >
            <div class="con disp" style="padding-bottom: 0;">
                <img class="target-img" src="/static/images/summary/2017.png">
                <p class="ani"  swiper-animate-effect="swing" swiper-animate-duration="1s" swiper-animate-delay="0s">
                    今年<br/>
                    你的目标是多少公里<br/>
                    <img class="img30" src="/static/images/summary/arrow.png">
                </p>
                <ul>
                    <li class="ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
                        新手入门
                        <a class="targettype" data-id="1">300-500公里</a>
                    </li>
                    <li class="ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
                        小试身手
                        <a class="targettype" data-id="2">500-1000公里</a>
                    </li>
                    <li class="ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.4s">
                        驰骋赛场
                        <a class="targettype" data-id="3">1000-2000公里</a>
                    </li>
                    <li class="ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2.1s">
                        超越极限
                        <a class="targettype" data-id="4">超过2000公里</a>
                    </li>
                </ul>
                
           </div>
           <div class="con target-mod" style="display: none;padding-bottom: 0;" >
                <img class="target-img" src="/static/images/summary/2017.png">
                <p>今年你的目标是 </p>
                <div class="target-box ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                    <span class="target-num">
                      <%if(result.list.targetMileageType==1){%>
                        300-500
                      <%}else if(result.list.targetMileageType==2){%>
                        500-1000
                      <%}else if(result.list.targetMileageType==3){%>
                        1000-2000
                      <%}else if(result.list.targetMileageType==4){%>
                        超过2000
                      <%}else{%>
                        未设置
                      <%}%>
                    </span><br/>
                    公里<br/>
                </div>
                <div class="a-list">
                    <a class="wx"></a>
                    <a class="pyq"></a>
                    <a class="wb"></a>
                    <a class="kj"></a>
                </div>
                <p class="f12 ac color-white">
                    分享你的专属跑步报告，让好友为你加油！
                </p>
                <a id="btn" class="choice">重新选择里程</a>
                 <div class="egg" style="display: none;">
                    <img src="/static/images/summary/egg-light.png?v=1">
                    <img src="/static/images/summary/egg.png?v=2">
                </div>
            </div>
           
           <div class="pagedown" >
                <img src="/static/images/share/logo-blue.png">
            </div>

        </section>
        <!-- 第五屏 2017目标设置 -->
    </script>
</body>

<script>
    rem();
    var screenHight = Number(document.body.scrollHeight);
    var uid ={$uid};
    var alphaId="{$alphaId}";
    $.get('{$appHost}/analysis_runWeb/getYearRunDataReviewForUser',{'uid':uid}, renderHome);
    function renderHome(data) {
        data = JSON.parse(data);
        console.log(data)
        var html = template('year', data);
        $('#year-box').html(html);
        var screenHeight = document.body.scrollHeight;
        var swiper = new Swiper('.swiper-container', {
            paginationClickable: true,
            direction: 'vertical',
            nextButton:'.swiper-button-next',
            onInit: function(swiper){
                swiperAnimateCache(swiper); 
                swiperAnimate(swiper);
            }, 
            onSlideChangeEnd: function(swiper){ 
                swiperAnimate(swiper);
            } 
        });
        // 滑屏js
        $(".targettype").click(function(){
            var targetMileageType= $(this).attr('data-id')
            $.post('{$appHost}/analysis_runWeb/setUserTargetType',{targetMileageType:targetMileageType},function(data , error){
                console.log(data)
            })
            _hmt.push(['_trackEvent', 'report2016', '2017target'+targetMileageType]);
            $(".target-mod").css('display','block')
            $(".target-mod").fadeIn("slow");
            $(".disp").fadeOut("slow");
            if(targetMileageType==1){
                $(".target-num").html("300-500") 
            }else if(targetMileageType==2){
                $(".target-num").html("500-1000")
            }else if(targetMileageType==3){
                $(".target-num").html("1000-2000")
            }
            else if (targetMileageType==4){
                $(".target-num").html("超过2000")
            }
        })
        $(".choice").click(function(){
            $(".target-mod").fadeOut("slow");
            $(".disp").fadeIn("slow");
        })
        // 重新选择
        {template 'show/year-animation'}

    }

   
</script>

{template 'show/web-footer'}
